<template>
	<view class="textRich">
		<!-- 工具栏 -->
		<view class="tools" v-show="!isReadOnly">
			<view class="iconfont icon-tupian" @tap="addImg">				
			</view>
			<view class="iconfont icon-chehui" @tap="undo">
			</view>
			<view class="iconfont icon-delete" @tap="clear">
			</view>
		</view>
		 <editor id="editor" class="ql-container" :placeholder="placeholder" :read-only="isReadOnly"	 @ready="onEditorReady"></editor>
		

	</view>
</template>

<script>
		export default {
			props:{
				initContent:{ //初始化默认内容
					type:String,
					default:''
				},
				isReadOnly:{ //是否只读
					type:Boolean,
					default:false,
				}
			},
			watch:{
				initContent(newval,oldval){
						if(this.editorCtx){
							this.editorCtx.setContents({ //初始化富文本内容
								html:newval,
								success:(res)=>{
									
								}
							})
						}
				}
			},
			data(){
				return {
					editorCtx:null,
					placeholder:'在这写下你想要说的话吧！'
				}
			},
			methods:{
				  onEditorReady() {
				                // #ifdef MP-BAIDU
				                this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor'); //获取富文本对象
				                // #endif			
				                // #ifdef APP-PLUS || H5 ||MP-WEIXIN
				                uni.createSelectorQuery().select('#editor').context((res) => {
				                  this.editorCtx = res.context
				                }).exec()
				                // #endif
								
								this.editorCtx.setContents({ //初始化富文本内容
									html:this.initContent,
									success:(res)=>{
										
									}
								})
				            },
							addImg(){ //添加图片
								uni.chooseImage({
									success:({tempFilePaths,tempFiles})=>{
										
										tempFilePaths.forEach((item,index)=>{
										     	uni.uploadFile({
											         url:'http://139.224.164.161:9998/index.php/blientBoxuser/upload', //仅为示例，非真实的接口地址
											         filePath: tempFilePaths[index],
											         fileType:'image',
											         success: (uploadFileRes) => {
														  console.log()
														 var src=JSON.parse(uploadFileRes.data).data.data
														
														this.editorCtx.insertImage({
															src,
															text:'图片加载失败...',
															width:'200'
														})
											       
											         }
											     });
										})
										
									
									}
								})
							},
				            undo() {
				                this.editorCtx.undo()
				            },
							
							clear(){
								this.editorCtx.clear({
									success:(res)=>{
										console.log(res)
									}
								})
							}
			},
			
		}
		
</script>

<style scoped lang="scss">
	.tools{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
		view{
		font-size: 50rpx;
			margin: 0px 10rpx;
		}
	}
	#editor{
		margin: 20rpx 0rpx;
		height: 700rpx;
	}
</style>
